<template>
    <div  :style="background" class="register_container">
    <div class="navigation_bar">
      <span class="logo"> </span>
      <span class="hometag" @click="turntowelcome">首页 </span>
      <span class="registertag" @click="turntoregister">注册</span>
      <span class="logintag" @click="turntologin">登录</span>
    </div>
      <div class="register_box"> 
        <div class="text"> 注 册 </div>
         <!--登录表单区域-->
         <el-form ref="registerformref"  label-width="0px"  class="register_form" :model="registerform" :rules="registerformrules">
              <!--注册账号-->
              <el-form-item prop="ID">
              <el-input v-model="registerform.ID" placeholder="请设置账号" prefix-icon="el-icon-mobile" ></el-input>
              </el-form-item>
               <!--设置密码-->
              <el-form-item prop="password">
              <el-input  v-model="registerform.password" placeholder="请设置密码" prefix-icon="el-icon-lock" type="registerPassword"></el-input>
              </el-form-item>
             
             <el-form-item prop="username">
              <el-input v-model="registerform.username" placeholder="请设置昵称" prefix-icon="el-icon-s-custom" ></el-input>
              </el-form-item>

              <el-form-item class="btns">
               <el-button type="primary" @click="register">注册</el-button>
               <el-button type="info" @click="resetregisterform">重置</el-button>
              </el-form-item>
         </el-form>
      </div>
    </div>
</template>

<script>

export default {
    data(){
        return{
            //这是登录表单的数据绑定对象
            registerform:{
              ID: '',
              password: '',
              username: '',
            },
            //这是表单的验证规则对象
            registerformrules:{
              //验证用户名是否合法
              ID:[
                { required: true, message: '请输入手机号/邮箱', trigger: 'blur' },
                { min: 8, max: 20, message: '长度在 8到 20 个字符', trigger: 'blur' }
                ],
              //验证密码是否合法
              password:[,
                { required: true, message: '请设置登录密码', trigger: 'blur' },
                { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' }
              ],
              username:[
                { required: true, message: '请设置昵称', trigger: 'blur' },
                { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
              ]
            },
            background: {
      	    // 背景图片地址
            backgroundImage: 'url(' + require('../assets/webp2.jpeg') + ')',
            // 背景图片是否重复
            backgroundRepeat: 'no-repeat',
            // 背景图片大小
            backgroundSize: '100% 105%',
            // 背景颜色
            backgroundColor: '#000',
            // 背景图片位置
            backgroundPosition: 'center top'
            }

      }
    },
    methods:{
        //点击重置按钮，重置注册表单
        resetregisterform() {
            this.$refs.registerformref.resetFields();
        },
        register() {
            this.$refs.registerformref.validate(valid =>{
             if(!valid) return;
            });
        },
        turntowelcome: function(){
            this.$router.replace('/welcomepage');
        },
        turntologin: function(){
            this.$router.replace('/login');
        },
        turntoregister: function(){
            this.$router.replace('/register');
        }
    }
};
</script>

<style scoped>

.register_container {
   /*background-color: #a290e6c9;
   background: rgba(188, 150, 197, 0.609);*/
   height: 100%;
}
.register_box{
    width: 400px;
    height: 400px;
    background-color: rgba(247, 245, 245, 0.692);
    border-radius: 20px;/*圆角*/
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}
.text{
    position: absolute;
    top:10%;
    left:40%;
    font-size: 40px;
    font-weight: 700;
    color:rgb(187, 187, 187);
}
/*
.avatar_box{
    background-color: rgb(255, 255, 255);
    height:130px;
    width: 130px;
    border:1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position:absolute;
    left:50%;
    transform: translate(-50%,-50%);
    img{
        width:100%;
        height:100%;
        border-radius: 50%;
        background-color: #eee;
    }
}
*/
.btns{
    display: flex;
    justify-content: center;
}
.register_form{
    position: absolute;
    bottom: 5%;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}
.navigation_bar{
 height: 80px;
}
.hometag{
    position: absolute;
    left:15%;
    top:2%;
    font-size: 23px;
    font-weight: 400;
    color: aliceblue;
}
.registertag{
    position: absolute;
    left:83%;
    top:2%;
    font-weight: 400;
    font-size: 23px;
    color: aliceblue;
}
.logintag{
    position: absolute;
    left:90%;
    top:2%;
    font-weight: 400;
    font-size: 23px;
    color: aliceblue;
}
</style>